<template>
    <div>
        <el-dialog title="添加收货地址信息" :visible.sync="dialogFormVisible"
        :before-close="handleClose">
            <el-form :model="form" status-icon :rules="rules" ref="form" class="edreceiveform">
                <el-form-item label="收货人:" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off" style="width: 120px;"></el-input>
                </el-form-item>
                <el-form-item label="省/直辖市:" :label-width="formLabelWidth" prop="province">
                <el-select v-model="form.province">
                    <el-option v-for="provincelist in provincelist" :key="provincelist.code"
                    :label="provincelist.name" 
                    :value="`${provincelist.name}|${provincelist.code}`">
                        <span style="float: left">{{provincelist.name}}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{provincelist.code}}</span>
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="城市:" :label-width="formLabelWidth" prop="city">
                <el-select v-model="form.city">
                    <el-option v-for="citylist in citylist" :key="citylist.code"
                    :label="citylist.name" 
                    :value="`${citylist.name}|${citylist.code}`">
                        <span style="float: left">{{citylist.name}}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{citylist.code}}</span>
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="区县:" :label-width="formLabelWidth" prop="area">
                <el-select v-model="form.area">
                    <el-option v-for="arealist in arealist" :key="arealist.code"
                    :label="arealist.name" 
                    :value="`${arealist.name}|${arealist.code}`">
                    <span style="float: left">{{arealist.name}}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{arealist.code}}</span>
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="详细地址:" :label-width="formLabelWidth" prop="detailed_address">
                <el-input type="textarea" v-model="form.detailed_address" autocomplete="off" 
                placeholder="请您输入到具体的小区名称、门牌号等"></el-input>
                </el-form-item>
                <el-form-item label="手机" :label-width="formLabelWidth" prop="phone">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="固定电话" :label-width="formLabelWidth" prop="tel">
                <el-input v-model="form.tel" autocomplete="off" placeholder="固定电话可选填"></el-input>
                </el-form-item>
                    <el-form-item label="地址类型" :label-width="formLabelWidth" prop="tag">
                        <el-radio-group v-model="form.tag" size="mini">
                        <el-radio border label="学校" style="width: 32px;"></el-radio>
                        <el-radio border label="公司" style="width: 32px;"></el-radio>
                        <el-radio border label="家" style="width: 32px;"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="warning" @click="resetForm('form')">重 置</el-button>
                <el-button @click="gobacktomanagement">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'Xiaoedreceivemanagement',
        data(){
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                return callback(new Error('手机号码不能为空'));
                }
                setTimeout(() => {
                if (isNaN(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value.length != 11) {
                    callback(new Error('手机号码必须为11位数字'));
                    } else {
                    callback();
                    }
                }
                }, 200);
            };
            return{
                OldRouter:'',
                provincelist:[],
                citylist:[],
                arealist:[],
                dialogFormVisible: true,
                formLabelWidth: '100px',
                province_name:'',
                city_name:'',
                area_name:'',
                province_code:'',
                city_code:'',
                area_code:'',
                form:{
                    name: '',
                    province:'',
                    city:'',
                    area:'',
                    detailed_address:'',
                    phone:'',
                    tel:'',
                    tag:'',
                },
                rules:{
                    name:[{
                        required: true, message: '请输入收货人姓名', trigger: 'blur'
                    }],
                    province: [{
                        required: true, message: '请选择省/直辖市', trigger: 'change'
                    }],
                    city: [{
                        required: true, message: '请选择所在城市', trigger: 'change'
                    }],
                    area: [{
                        required: true, message: '请选择所在区县', trigger: 'change'
                    }],
                    detailed_address:[{
                        required: true, message: '请输入详细收货地址', trigger: 'blur'
                    }],
                    phone:[{
                        required: true, validator: checkPhone, trigger: 'blur'
                    }],
                    tel:[{
                        required: false, message: '请输入固定电话', trigger: 'blur'
                    }],
                    tag:[{
                        required: true, message: '请选择地址类型', trigger: 'blur'
                    }],
                }
            }
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$addr.get(`addresses/add_new_address?name=${this.form.name}&provinceName=${this.province_name}&cityName=${this.city_name}&areaName=${this.area_name}&address=${this.province_name+this.city_name+this.area_name+this.form.detailed_address}&phone=${this.form.phone}&tel=${this.form.tel}&tag=${this.form.tag}`).then(
                    response=>{
                        console.log('请求成功了,添加了新的收货地址',response)
                        this.$notify.success({
                            title: '提示',
                            message: '恭喜你,添加新的收货地址成功!',
                        });
                        this.$router.push({name:'xrefreshpage'})
                    },error=>{
                        this.$message({
                            message: '呕吼请求失败了',
                                type: 'warning'
                            });
                        console.log('请求失败了,我没有响应本次数据',error)
                    })
                    this.dialogFormVisible=false
                    if( this.OldRouter== 'xrecmanage'){
                        this.$router.push({name:'xrecmanage'})
                    }else{
                        this.$router.push({name:'xCreateOrder'})
                    }

                    console.log('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            gobacktomanagement(){
                this.dialogFormVisible=false
                if( this.OldRouter== 'xrecmanage'){
                    this.$router.push({name:'xrecmanage'})
                }else{
                    this.$router.push({name:'xCreateOrder'})
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleClose(done){
                this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogFormVisible=false
                    if( this.OldRouter== 'xrecmanage'){
                        this.$router.push({name:'xrecmanage'})
                    }else{
                        this.$router.push({name:'xCreateOrder'})
                    }
                    done();
                })
                .catch(_ => {});
            }
        },
        mounted(){
            this.OldRouter=this.$route.params.OldRouter
            this.$addr.get(`districts?parent=86`).then(
            response=>{
                console.log('请求成功了,我获取到了省/直辖市数据',response)
                this.provincelist=response.data.data
            },error=>{
                this.$message({
                    message: '呕吼请求失败了',
                        type: 'warning'
                    });
                console.log('请求失败了,我没有获取到用户的数据',error)
            })
        },
        watch:{
            'form.province'(val){
            this.form.city=this.form.area=''
            let [province_name,province_code] = val.split('|') // es6 数组解构赋值
            this.province_name=province_name
            this.province_code=province_code
            this.$addr.get(`districts?parent=${province_code}`).then(
            response=>{
                console.log('请求成功了,我获取到了该城市数据',response)
                this.citylist=response.data.data
            },error=>{
                this.$message({
                    message: '呕吼请求失败了',
                        type: 'warning'
                    });
                console.log('请求失败了,我没有获取到用户的数据',error)
            })
            },
            'form.city'(val){
                this.form.area=''
            let [city_name,city_code] = val.split('|') // es6 数组解构赋值
            this.city_name=city_name
            this.city_code=city_code
            this.$addr.get(`districts?parent=${city_code}`).then(
            response=>{
                console.log('请求成功了,我获取到了该区县数据',response)
                this.arealist=response.data.data
            },error=>{
                this.$message({
                    message: '呕吼请求失败了',
                        type: 'warning'
                    });
                console.log('请求失败了,我没有获取到用户的数据',error)
            })
            },
            'form.area'(val){
                let [area_name,area_code] = val.split('|') // es6 数组解构赋值
                this.area_name=area_name
                this.area_code=area_code
            },
        },
    }
</script>

<style>
.edreceiveform{
    height: 500px;
    width: 300px;
}
</style>